先給自己愛的鼓勵!!

• 沒話說 ~ 第四天仍然知道寫些什麼，代表你有認真的想把RxJS給學好，那就來說說多人訂閱吧!!

多人訂閱

• 為了區分，我們建立兩個觀察者:observer1及observer2，並印出各自的訊息來觀察看看!
• 開啟console，來看看範例1

import { Observable } from 'rxjs';

// 被觀察的目標(Observable)
const asyncObs$ = new Observable((subscriber) => {
  // 第一步:加入async程式
  let count = 0;
  const id = setInterval(() => {
    count += 1;
    subscriber.next(count); // next() 送出資料
  }, 1000);

  // 第二步: 回傳一個function來代表 "結束訂閱"(參考補充說明1)
  return () => {
    console.log('結束訂閱!!');
    clearInterval(id);
  };
});

// 觀察者1(Observer1)
const observer1 = {
  next: (data) => console.log(`[Obs1$]:checked ${data}, next!`),
  error: (err) => console.log(`[Obs1$]:error is occured: ${err}}`),
  complete: () => console.log(`[Obs1$]:complete`),
};
// 觀察者2(Observer2)
const observer2 = {
  next: (data) => console.log(`[Obs2$]:checked ${data}, next!`),
  error: (err) => console.log(`[Obs2$]:error is occured: ${err}}`),
  complete: () => console.log(`[Obs2$]:complete`),
};

// 訂閱
console.log('=== before ===');
const subs1$ = asyncObs$.subscribe(observer1); // observer1開始訂閱
const subs2$ = asyncObs$.subscribe(observer2); // observer2開始訂閱

// 3秒後結束subs1$訂閱
setTimeout(() => {
  subs1$.unsubscribe();
}, 3000);
console.log('=== after ===');

// 5秒後結束subs2$訂閱
setTimeout(() => {
  subs2$.unsubscribe();
}, 5000);

• 啟動後印出的資訊如下:

// === before ===
// === after ===
// [Obs1$]:checked 1, next!
// [Obs2$]:checked 1, next!
// [Obs1$]:checked 2, next!
// [Obs2$]:checked 2, next!
// [Obs1$]:checked 3, next!
// [Obs2$]:checked 3, next!
// 結束訂閱!!
// [Obs2$]:checked 4, next!
// [Obs2$]:checked 5, next!
// 結束訂閱!!

解析

• 圖片解析程式碼

• 注意到了嗎，3秒到時，observer1取消訂閱，就不再發佈資訊給他了。
• 4秒~5秒這段時間，observer2繼續接收資料，然後取消訂閱，訊息就不再傳遞。
• 所以對RxJS來說，你一訂閱我，我就對你負責到底，直到你取消訂閱我(unsubscribe)!

你也可以這樣做:一個呼叫取消多人訂閱

• 假設我們在3秒同時讓observer1及observer2取消訂閱
• 開啟console，來看看，範例2:

// 訂閱
console.log('=== before ===');
const subs1$ = asyncObs$.subscribe(observer1); // observer1開始訂閱
const subs2$ = asyncObs$.subscribe(observer2); // observer2開始訂閱

// 將subs2$加到subs1$之中
subs1$.add(subs2$);

// 3秒後，一個呼叫結束subs1$,subs2$訂閱
setTimeout(() => {
  subs1$.unsubscribe();  // 取消訂閱後，就可以把其中相關的訂閱一起取消囉!!
}, 3000);
console.log('=== after ===');

解析

• 將subs2$加到subs1$，等於讓**subs1$**成為一個訂閱的集合。
• 因此，只要subs1$取消訂閱後，就可以把其中相關的訂閱一起取消囉!!
• 一個指令搞定，是不是簡單俐落阿!

Recap

• 取消訂閱unsubscribe，除了依序取消之外，還可以透過subs1$.add(subs2$)的方式整合所有的訂閱後，再透過一個指令，一次結束所有的訂閱。

• 完成了Day4，習慣逐漸養成，超讚!

• 接下來我們要開始介紹一些RxJS的operators，來讓各位感受一下RxJS的威力吧!